<template>
  <div class="news">
    <van-tabs
      @click-tab="tabClick"
      @change="tabChange"
      :swipeable="false"
      color="#74C0FB"
      class="van-tabs"
      type="card"
      v-model:active="active"
    >
      <van-tab title="通知公告">
        <news-item :news-list="announcementList"></news-item>
      </van-tab>
      <van-tab title="学院要闻">
        <news-item :news-list="schoolNewsList"></news-item>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import Scroll from '@/components/scroll/scroll.vue'
import { useState } from '@/hooks'
import NewsItem from './newsItem/newsItem.vue'
import emitter from '@/utils/eventbus';
export default defineComponent({
  props: {

  },
  components: {
    Scroll,
    NewsItem
  },
  setup(props,{emit}) {
    const active=ref(0)
    const newsListState = useState('home',["announcementList","schoolNewsList"])
    const tabClick=()=>{
      setTimeout(() => {
        emitter.emit('tabClickRefresh')
      }, 500);
    }
     const tabChange=(name)=>{
       console.log(active.value);
    }


    return {
      ...newsListState,
      tabClick,
      tabChange,
      active,


    }

  }
})
</script>

<style scoped lang="less">
.news {
  min-height: 400px;
  margin: 3vw;
  padding: 4vw;
  background-color: white;
  box-sizing: border-box;
  box-shadow: -10px 10px 10px #f0f0f0;
  &:deep(.van-tabs__content) {
    margin-top: 2vh;
  }
  &:deep(.van-tabs__nav--card) {
    margin: 0 !important;
  }
  &:deep(.van-tabs__nav) {
    justify-content: flex-start;
    border: none !important;
    .van-tab {
      border-right: none !important;
      width: 100px !important;
      overflow: hidden !important;
      flex: none !important;
      margin-right: 2vw;
      background-color: #fafafa;
    }
  }
}
</style>
